<template>
    <div class="home">
        <div class="logo"></div>
        <div class="banner"></div>

        <div class="title">买保险的难处，我们懂</div>

        <div class="radius item1">
            <i class="icon"></i>
            <div>
                <span>1</span>
                <p>重疾险要怎么买?买终身还是买定期？</p>
            </div>
            <div>
                <span>2</span>
                <p>用医保卡给父母买过药，据说对买保险会有影响，怎么办？还能买保险吗？</p>
            </div>
            <div>
                <span>3</span>
                <p>30岁需要买什么保险？有了医疗险还要买重疾险吗?</p>
            </div>
            <div>
                <span>4</span>
                <p>给孩子买保险听说只要700元就够了，为什么别人给我推荐都最便宜都要3000元？</p>
            </div>
            <div>
                <span>5</span>
                <p>买保险是个非常痛苦的过程，许多人在买保险前一知半解，问尽了身边卖保险的朋友，帮忙做的方案不是太贵就是保障不足，怎么办？</p>
            </div>
        </div>

        <div class="title">我们的服务流程</div>
        <div class="radius item2"></div>

        <div class="title">为什么选择猫姐说险</div>
        <div class="radius item3"></div>

        <div class="title">用户反馈</div>
        <div class="radius item4">
            <div class="list">
                <div class="head">
                    <div class="ava">
                        <img :src="ava1" />
                        大壮
                    </div>
                    <div class="time">2019-08-05 16:42:28</div>
                </div>
                <div
                    class="text"
                >第一次在猫姐这里做规划，心里还是非常忐忑的，想买保险，但又不知道怎么买，该买什么保险好，关注了猫姐的公众号很久，才决定花钱做个方案试试。当天就有老师联系我了，老师非常的专业，很耐心的回答了我所有问题，并且帮我合理的分析了我需要保障的风险。整体感觉这钱花的太值了。现在保险都买好了，跟身边卖保险的朋友说我现在的保费和保额，他们居然都不信有这么便宜保额又高的保险。都要我介绍来着。太赞了。</div>
            </div>
            <div class="list">
                <div class="head">
                    <div class="ava">
                        <img :src="ava2" />
                        宋小兔
                    </div>
                    <div class="time">2019-06-12 14:22:45</div>
                </div>
                <div
                    class="text"
                >在猫姐这里学了很多知识，看她的文章好久了，保险更新的太快，担心今天买了，明天又要新的保险，由于了很久。正好孩子6月出生了，就让猫姐帮我做一个家庭规划，老师非常专业，风险点分析的针针见血，配置也非常合理。</div>
            </div>
            <div class="list">
                <div class="head">
                    <div class="ava">
                        <img :src="ava3" />
                        蛋蛋和他的酒窝
                    </div>
                    <div class="time">2019-03-16 12:30:35</div>
                </div>
                <div
                    class="text"
                >在规划老师的指导下买了健康保2.0，真的是太便宜，以前总觉得重疾险很贵，要上万，没想到2000块钱也能买到重疾险而且还有50万的保额，老师也很耐心的知道我看条款，和解答我的问题。给蓝猫老师疯狂打call。</div>
            </div>
            <div class="list">
                <div class="head">
                    <div class="ava">
                        <img :src="ava4" />
                        一个瓶子
                    </div>
                    <div class="time">2019-02-08 10:05:12</div>
                </div>
                <div
                    class="text"
                >一包烟钱就解决了困惑我2个月的问题，孩子出生有黄疸，医生确诊是病理性的，想买保险，在看健康告知的时候很多都说黄疸不能买，规划师老师不仅帮我找到了适合的产品还帮我做了系统的规划，服务非常的好。最重要的是解决我的大难题，太感谢了。</div>
            </div>
        </div>

        <div class="nav">
            <button @click="plan">我的方案</button>
            <button @click="progress">进度</button>
            <button class="customized" @click="show=true">开始定制</button>
        </div>

        <van-popup v-model="show" position="bottom" class="popup">
            <div class="tit">
                <span>选择配置类型</span>
                <van-icon name="cross" @click="show=false" />
            </div>

            <div class="list">
                <div v-for="(item,index) in getList" :key="index" @click="onSelect(index,item.count)" :class="[select == index && item.count == '0' ? 'active':'',item.count == '0'? '':'prohibit']">
                    <div class="t">
                        <span>{{item.count !== '0' ? '已购买 ':''}}{{item.mingcheng}}</span>
                        <span>￥{{item.xianjia}}</span>
                    </div>
                    <div class="b">
                        <p>适合人群：{{item.shihe}}</p>
                        <p>方案特点：{{item.tedian}}</p>
                    </div>
                </div>
                <button class="btn" @click="customized">确定</button>
            </div>
        </van-popup>
    </div>
</template>

<script>
export default {
    name: "home",
    data() {
        return {
            ava1: require("@/assets/ava1.jpg"),
            ava2: require("@/assets/ava2.png"),
            ava3: require("@/assets/ava3.jpg"),
            ava4: require("@/assets/ava4.jpg"),
            show: false,
            select:-1,
            getList:[]
        };
    },
    mounted() {
        this.$api.getList().then(res=>{
            this.getList = res.data.list
        })
    },
    methods:{
      onSelect(d,count){
          if(count !== '0'){
              this.$toast(`此产品已购买`);
              return false
          }
        this.select = d
      },
      customized(){
          if(this.select == -1){
              this.$toast(`请先选择一款产品`);
              return false
          }
        sessionStorage.setItem('select',this.select)
        sessionStorage.setItem('getList',JSON.stringify(this.getList[this.select]))
        this.$router.push('customized')
      },
      progress(){
          this.$router.push('progress')
      },
      plan(){
          this.$router.push('plan')
      }
    }
    
};
</script>

<style lang="less" scoped>
.home {
    background: #ff9c00;
    padding: 0 10px;
    width: 100%;
    display: inline-block;
    padding-bottom: 80px;

    .logo {
        width: 100px;
        height: 39px;
        background: url("~@/assets/logo.png");
        background-size: 100% 100%;
        margin-top: 10px;
    }

    .banner {
        width: 100%;
        height: 477px;
        background: url("~@/assets/banner.png");
        background-size: 100% 100%;
        margin-top: 25px;
    }

    .title {
        font-family: "HYQiHei-FZS";
        background: url("~@/assets/title.png");
        background-size: 100% 100%;
        width: 300px;
        height: 39px;
        text-align: center;
        margin: 25px auto;
        font-size: 20px;
        line-height: 39px;
    }

    .radius {
        border-radius: 8px;
        width: 355px;
        box-shadow: 0px 0px 7px 0px rgba(251, 143, 0, 0.65);
        display: inline-block;
        background-color: #fff;
        color: #403d3c;
    }

    .item1 {
        background: url("~@/assets/d2.png") bottom no-repeat #fff;
        background-size: 100% 59px;
        position: relative;
        padding-top: 23px;
        padding-bottom: 50px;
        .icon {
            background: url("~@/assets/q.png") bottom no-repeat;
            background-size: 100% 100%;
            width: 81px;
            height: 61px;
            position: absolute;
            right: 9px;
            top: 4px;
        }

        div {
            width: 100%;
            margin-top: 14px;
            padding: 0 5px 0 10px;
            display: inline-block;
            span {
                width: 14px;
                height: 14px;
                background: #ff4a2f;
                border-radius: 14px;
                text-align: center;
                line-height: 14px;
                font-size: 12px;
                font-family: "PingFangSC-Medium";
                color: #fff;
                float: left;
                margin-top: 4px;
            }
            p {
                font-size: 14px;
                float: left;
                width: calc(100% - 18px);
                line-height: 22px;
                padding-left: 6px;
            }
        }
    }

    .item2 {
        background: url("~@/assets/lc.png") no-repeat #fff;
        background-size: 100% 100%;
        width: 355px;
        height: 661px;
    }

    .item3 {
        background: url("~@/assets/z.png") no-repeat #fff;
        background-size: 100% 100%;
        width: 355px;
        height: 188px;
    }

    .item4 {
        background: url("~@/assets/d1.png") bottom no-repeat #fff;
        background-size: 100% 93px;
        width: 355px;
        padding-top: 15px;
        padding-bottom: 65px;
        .list {
            margin: 0 15px;
            padding: 15px 0;
            border-bottom: 1px dashed #ffa700;
            &:last-of-type {
                border: none;
            }
            .head {
                width: 100%;
                display: inline-block;
                .ava {
                    float: left;
                    font-size: 13px;
                    color: #71706f;
                    font-weight: bold;
                    img {
                        width: 43px;
                        height: 43px;
                        border-radius: 43px;
                        vertical-align: middle;
                        margin-right: 8px;
                    }
                }
                .time {
                    float: right;
                    font-size: 13px;
                    color: #71706f;
                    line-height: 43px;
                }
            }

            .text {
                font-size: 13px;
                color: #403d3c;
                line-height: 18px;
                margin-top: 18px;
            }
        }
    }

    .nav {
        position: fixed;
        display: flex;
        justify-content: space-around;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        border-radius: 17px 17px 0 0;
        overflow: hidden;
        padding: 10px 0;
        button {
            width: 110px;
            height: 40px;
            border-radius: 40px;
            border: 1px solid #ff9c00;
            background: none;
            font-size: 15px;
            color: #ff9c00;
            &.customized {
                border: none;
                background: linear-gradient(
                    90deg,
                    rgba(255, 186, 78, 1),
                    rgba(255, 138, 0, 1)
                );
                color: #fff;
            }
        }
    }
}

.popup {
    padding: 0 15px 10px 15px;
    height: 440px;
    .tit {
        height: 70px;
        display: flex;
        justify-content: space-between;
        span {
            font-size: 20px;
            color: #28282c;
            line-height: 70px;
            font-weight: bold;
        }
        .van-icon {
            color: rgb(151, 151, 151);
            vertical-align: middle;
            margin-top: 20px;
        }
    }
    .list {
      >div{
        width: 100%;
        border-radius: 5px;
        padding: 0 20px;
        box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
        margin-bottom: 10px;
        .t{
          height: 45px;
          line-height: 45px;
          display: flex;
          justify-content: space-between;
          color: #28282C;
          font-size: 16px;
        }
        .b{
          border-top: 1px solid #EEEAEA;
          display: none;
          p{margin: 15px 0;color: #9E9A98;font-size: 14px;}
        }

        &.active{
          border: 1px solid #FF7200;
          box-shadow: 0 0 7px rgba(251, 143, 0, 0.65);
          .t{
            color: #FF7200;
            font-weight: bold;
          }
          .b{
            display: block;
          }
        }
        &.prohibit{
            background:#9E9A98;
            .t{color: #fff}
            .b{
                display: none;
            }
        }
        
      }
    }

    .btn{position: absolute;bottom: 10px;left: 15px;}
}
</style>

